<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
    <script src="./layui-v2.6.8/layui/layui.js"></script>
    <script src="./common.js"></script>
    <title>Document</title>
    <style>
        .layui-nav {
            overflow: hidden;
        }


        .layui-nav .new {
            float: left;
        }

        .layui-nav .userInfo {
            float: right;
        }
    </style>
</head>

<body>
    <ul class="layui-nav">
        <li class="layui-nav-item new">新闻详情</li>
        <li class="layui-nav-item userInfo"></li>
    </ul>
    <div class="main">
        <div class="layui-panel">
            <div style="padding: 50px 30px;">

                <table class="layui-table">
                    <tbody>
                        <tr>
                            <th>标题</th>
                        </tr>
                        <tr>
                            <th>内容</th>
                        </tr>
                        <tr>
                            <th>发布时间</th>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <textarea name="" id="" cols="160" rows="5"></textarea><button>提交评论</button><br>
    <h3>评论区</h3>
    
    <div id="test1"></div>
    <script>
        let url = window.location.search;
        let value = getUrlParams('id', url);
        let userInfo = (getCookie('userInfo')) ? JSON.parse(getCookie('userInfo')) : null;
        if (userInfo) {
            document.querySelector('.userInfo').innerHTML = `欢迎用户${userInfo.mobile}`;
        } else {
            document.querySelector('.userInfo').innerHTML = `<a href = "login.html">登陆</a>`
        }
        let xhr = new XMLHttpRequest;
        xhr.open('GET', 'http://phpclub.org.cn/edu/server/getContent.php?id=' + value);
        xhr.send();
        xhr.onload = function () {
            let response = JSON.parse(xhr.responseText);
            document.querySelectorAll('tbody>tr')[0].innerHTML += `<td>${response.data.title}</td>`;
            document.querySelectorAll('tbody>tr')[1].innerHTML += `<td>${response.data.content}</td>`;
            document.querySelectorAll('tbody>tr')[2].innerHTML += `<td>${getLocalTime(response.data.created_at)}</td>`;
        }
        document.querySelector('button').addEventListener('click', function () {
            let textareaDom = document.querySelector('textarea').value;
            if (!textareaDom) {
                alert('评论区不能为空');
            }
            let xhr1 = new XMLHttpRequest;
            xhr1.open('POST', 'http://phpclub.org.cn/edu/server/addComment.php');
            xhr1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr1.send(`userId=${userInfo.id}&newsId=${value}&content=${textareaDom}`);
            xhr1.onload = function () {
                let response = JSON.parse(xhr1.responseText);
            }
        })
        let xhr2 = new XMLHttpRequest();
        xhr2.open('GET', 'http://phpclub.org.cn/edu/server/getComment.php?newsId=' + value + '&page=1&pageSize=400');
        xhr2.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr2.send();
        xhr2.onload = function () {
            let response = JSON.parse(xhr2.responseText);
            console.log(response);
            layui.use('laypage', function () {
                var laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: response.count //数据总数，从服务端得到
                    , jump: function (obj) {
                        let end = (obj.curr * 10 > this.count) ? this.count : this.curr * 10;
                        let htmlDom = '';
                        for (let i = obj.curr * 10 - 10; i < end; i++) {
                            let liDom = document.createElement('li');
                            liDom.innerHTML = response.data[i].content + '<br>评论时间:'+getLocalTime(response.data[i].created_at)+'<br><button>点赞</button>';
                            document.querySelector('#test1').appendChild(liDom)//得到每页显示的条数
                        }
                    }
                });
            });
        }
    </script>
</body>

</html>